<template>
	<view class="page">
		<hx-navbar title="授课时间" :fixed="true" bar-placeholder="hidden" transparent="auto"
				:background-color="[255,255, 255,1]" color="#ffffff" @bindBack="bindBack" />
		<view class="top"></view>
		<view class="main_view">
			<view class="main">
				<text class="navy_blue f_semibold">请选择可授课时间段</text>
				<view class="time_list">
					<view class="time_item">
						<text class="gery1">上午</text>
						<text class="gery1">{{ timeList[0] }}</text>
					</view>
					<view class="time_item">
						<text class="gery1">下午</text>
						<text class="gery1">{{ timeList[1] }}</text>
					</view>
					<view class="time_item">
						<text class="gery1">晚上</text>
						<text class="gery1">{{ timeList[2] }}</text>
					</view>
				</view>
				<view class="day_list">
					<view class="day_item" v-for="(weekItem, weekIndex) in weekList" :key="weekIndex">
						<text class="navy_blue f_28 f_semibold">周{{ weekItem }}</text>
						<view class="times">
							<view v-for="(timeItem, timeIndey) in timeList" :key="timeIndey" :class="[dayList[weekIndex][timeIndey] ? 'active' : 'gery1']" @tap="bindTime(weekIndex, timeIndey)">
								<text class="f_24">{{ timeList[timeIndey] }}</text>
								<image v-if="dayList[weekIndex][timeIndey]" :src="imgPrefix('/static/image/teacher/check.png')"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		<fixed-bottom>
			<view :class="['btn',checkList(dayList)?'active_btn':'']" @tap="bindBtn">确定时间</view>
		</fixed-bottom>
		</view>
	</view>
</template>
<script>
const app = getApp();
export default {
	data() {
		return {
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			timeList: ['06:00-12:00', '12:00-18:00', '18:00-24:00'],
			dayList: [
				[false,false,false],
				[false,false,false],
				[false,false,false],
				[false,false,false],
				[false,false,false],
				[false,false,false],
				[false,false,false]
			]
		};
	},
	onLoad(option) {
		app._log(this.dayList[1][1])
		if(option.hasOwnProperty('time')&&decodeURIComponent(option.time)!='[]'){
			this.dayList = JSON.parse(decodeURIComponent(option.time))
		}
	},
	methods: {
		checkList(val){
			return JSON.stringify(val).indexOf('true')!=-1
		},
		bindBack(){
			uni.showModal({
				title: '退出提醒',
				content: '已选择时间暂未保存，是否退出',
				confirmColor:'#000000',
				success: function (res) {
					if (res.confirm) {
						uni.navigateBack()
					}
				}
			});
		},
		bindTime(index,indey){
			index=Number(index)
			indey=Number(indey)
			// app._log(index,indey)
			// app._log('this.dayList',this.dayList);
			// app._log('this.dayList[1]',this.dayList[1]);
			// app._log('this.dayList[1][1]',this.dayList[1][1])
			this.dayList[index][indey] = !this.dayList[index][indey];
			this.$forceUpdate();
		},
		bindBtn(){
			if(this.checkList(this.dayList)){
				uni.$emit("setObj",{type:3,objList: this.dayList});
				uni.navigateBack();
			}else{
				this.showToast('您暂未选择授课时间')
			}
		}
	}
};
</script>

<style lang="scss">
.page {
	position: relative;
	min-height: 100vh;
}
.top {
	width: 750rpx;
	height: 302rpx;
	background-image: linear-gradient(313deg, #693ae6 0%, #9564e6 100%);
}
.main_view {
	position: absolute;
	top: 208rpx;
	left: 48rpx;
	z-index: 1;
	.main {
		width: 654rpx;
		height: 1050rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 32rpx;
		padding: 32rpx 32rpx 24rpx;
		margin-bottom: 130rpx;
		.navy_blue {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #252748;
		}
		.gery1 {
			height: 34rpx;
			font-size: 24rpx;
		}
		.time_list {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 0;
			.time_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		.day_list {
			.day_item {
				width: 606rpx;
				height: 102rpx;
				background-color: #f8f8f9;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 12rpx 0 24rpx;
				
				&:not(:last-child) {
					margin-bottom: 16rpx;
				}
				.navy_blue {
					padding-right: 24rpx;
				}
				.times {
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: space-between;
					view {
						width: 154rpx;
						height: 70rpx;
						border-radius: 16rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: flex;
						align-items: center;
						justify-content: center;
						&.active {
							color: #7f4aff;
							background-color: rgba(127, 74, 255, 0.1);
							border: solid 1.2rpx #7f4aff;
							position: relative;
							image{
								position: absolute;
								right: 0;
								bottom: 0;
								width: 32rpx;
								height: 32rpx;
							}
						}
						&:not(.active) {
							background-color: #ffffff;
							border: solid 1rpx #d1d2db;
						}
					}
				}
			}
		}
	}
	.btn {
		width: 654rpx;
		height: 92rpx;
		display: flex;
		border-radius: 16rpx;
		font-size: 32rpx;
		align-items: center;
		justify-content: center;
		&.active_btn {
			color: #fff;
			background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
		}
		&:not(.active_btn) {
			color: #d1d2db;
			background-color: #f0f0f6;
		}
	}
}
</style>
